<template lang='pug'>
  //配置管理
  div.box
    el-header.header(style="height:40px;")
      el-input.mar_r( style="width:200px" v-model="listQuery.keyword" placeholder="标题或标识" )
      el-button.mar_r( type="primary" @click="searchBtn") 搜索
      el-popover.mar_l( placement="bottom" width="360" v-model="showAdd" title="添加")
        el-form( :model="form" ref="form" size="small")
          el-form-item( label="名称" prop="title" )
            el-input( placeholder="请输入名称" v-model="form.title")

          el-form-item( label="类型" prop="type" )
            el-select(v-model="form.type" placeholder="选择配置" style="width:100%;")
              el-option( v-for="item in settings"  :key="item.id"  :label="item.title"  :value="item.id")
          
          el-form-item( label="标识码" prop="code" )
            el-input( placeholder="请输入标识码" v-model="form.code")

          el-form-item( label="参数" prop="param" )
            el-input( placeholder="请输入参数"  v-model="form.param")

          el-form-item( label="描述" prop="sdesc" )
            el-input(
              type="textarea"  
              :autosize="{ minRows: 3, maxRows: 5}"
              placeholder="请输入内容"
              v-model="form.sdesc"
            )

        div(style="text-align: right; margin: 0")
          el-button(size="mini" type="text" @click="cancel") 取消
          el-button(type="primary" size="mini" @click="confirm" ) 确定

        el-button( type="primary"  slot="reference" @click="addForm") 添加
      el-popover.mar_l( placement="bottom"  trigger="hover")
        el-button( type="primary" size="small" round @click="changeType(1)") 业务配置
        el-button( type="primary" size="small" round @click="changeType(2)") 安卓配置
        el-button( type="primary" size="small" round @click="changeType(3)") IOS配置
        el-button( type="primary" size="small" round @click="changeType(4)") 后台系统配置
        el-button( type="primary" size="small" round @click="changeType(5)") 小程序配置
        el-button(slot="reference" type="primary") 配置选项 ( 当前为 : {{listQuery.type | nowChoose}} )

    el-main
      el-table( :data="list" border highlight-current-row style="width: 100%" )
        el-table-column( 
          label="序号" width="100" 
          align="center"
          type="index"
          :index="indexMethod")
        el-table-column(align="center" label="名称")
          template(slot-scope="scope")
            span {{scope.row.title}}
        el-table-column(align="center" label="标识码")
          template(slot-scope="scope")
            span {{scope.row.code}}
        el-table-column(align="center" label="参数")
          template(slot-scope="scope")
            span {{scope.row.param}}
        el-table-column(align="center" label="备注")
          template(slot-scope="scope")
            span {{scope.row.sdesc}}
        el-table-column(align="center" label="最后更新时间")
          template(slot-scope="scope")
            span {{scope.row.updateTime | timeFormat }}
        el-table-column(align="center" label="最后更新人")
          template(slot-scope="scope")
            span {{scope.row.updateName}}
        el-table-column(align="center" label="操作" fixed="right" width="80")
          template(slot-scope="scope")
            el-button( size="small" type="primary" @click="editNow(scope.row)") 编辑
    el-footer
      el-pagination(
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="listQuery.limit"
      layout="total,sizes, prev, pager, next,jumper"
      :total="total")
    
    //编辑
    el-dialog( title="编辑"  :visible.sync="dialog"  width="30%")
      el-form( :model="form" ref="form" size="small")
        el-form-item( label="名称" prop="title" )
          el-input( placeholder="请输入名称" v-model="form.title")

        el-form-item( label="类型" prop="type" )
          el-select(v-model="form.type" placeholder="选择配置" style="width:100%;")
            el-option( v-for="item in settings"  :key="item.id"  :label="item.title"  :value="item.id")
        
        el-form-item( label="标识码" prop="code" )
          el-input( placeholder="请输入标识码" v-model="form.code")

        el-form-item( label="参数" prop="param" )
          el-input( placeholder="请输入参数"  v-model="form.param")

        el-form-item( label="描述" prop="sdesc" )
          el-input(
            type="textarea"  
            :autosize="{ minRows: 3, maxRows: 5}"
            placeholder="请输入内容"
            v-model="form.sdesc"
          )
      span(slot="footer" class="dialog-footer")
        el-button(@click="notUpdate") 取 消
        el-button(type="primary" @click="update") 确 定

</template>

<script>

import { page,addObj,delObj,putObj } from '@/api/Basic/set'
import { Timer } from '@/utils/timer'
import { mixin } from "@/mixin/index";
export default {
  mixins: [mixin],
  name: "setting",
  data() {
    return {
      dialog:false,

      settings:[
        { id:1,title:'业务配置' },
        { id:2,title:'安卓配置' },
        { id:3,title:'IOS配置' },
        { id:4,title:'后台系统配置' },
        { id:5,title:'小程序配置' },
      ],
      listQuery:{
        page:1,
        limit:10,
        keyword:'',
        type:1
      },
      list:[],
      total:0,
      showAdd:false,
      form:{
        title:'',
        type:1,
        code:'',
        param:'',
        desc:'',
      },
    };
  },
  filters:{
    timeFormat:function(value) {
      if(value) return Timer.formatTime(value);
      else return '暂无更新时间'
    },
    nowChoose:function(value) {
      const tpyes = ['业务配置','安卓配置','IOS配置','后台配置','小程序配置'];
      return tpyes[value-1]
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    addForm(){
      this.resetForm;
    },
    //编辑
    editNow(row){
      this.dialog = true;
      this.form.title = row.title;
      this.form.type = row.type;
      this.form.code = row.code;
      this.form.param = row.param;
      this.form.sdesc = row.sdesc;
      this.form.id = row.id;
    },
    async update(){
      const Response = await putObj(this.form);
      if(Response){
        await this.getList();
        this.Notice('成功','创建成功','success');
      }
      this.resetForm();
      this.dialog = false;
    },
    notUpdate(){
      this.resetForm();
      this.dialog = false;
    },
    async getList(){
      const Response = await page(this.listQuery)
      if(!Response) return
      this.list = Response.data.records;
      this.total = Response.data.total;
    },
    searchBtn(){
      this.getList();
    },
    changeType(id){
      this.listQuery.type = id;
      this.getList();
    },
    cancel(){
      this.showAdd = false;
    },
    async confirm(){
      const Response = await addObj(this.form);
      if(Response){
        await this.getList();
        this.Notice('成功','创建成功','success');
        this.showAdd = false;
      }
      this.resetForm()
    },
    // 初始化表单
    resetForm(){
      this.form={
        title:'',
        type:1,
        code:'',
        param:'',
        sdesc:'',
      }
    }
  }
};
</script>
<style lang="less" scoped>


</style>


